<template>
	<view class="container">
		<navSearchBar title="全部客户" :hasSearch="true" :readonly="false" @conFirmSearch="topSearch" ref="topSearchRef"></navSearchBar>
		<view class="operate">
			<view class="left-item">
			<text>数量：</text>
			<text class="number">{{total}}</text>
			</view>
			<!-- <text class="tn-icon-filter" @click="openSearch"></text> -->
			<image src="/static/srceen.png" @click="openSearch"></image>
		</view>
		<view class="content">
			<view class="list-item" v-for="(item,index) in list" :key="index" @click="routeDetail(item)">
				<view class="item-top">
					<image :src="item.access_authority==1?'/static/client/auth_open.png':'/static/client/auth_close.png'"></image>
					<text>{{item.name}}</text>
				</view>
				<view class="item-tag">
					<view class="tag-score"><text>{{item.integrity_score.text}}</text></view>
					<view class="tag-scale"><text>{{item.scale.text}}</text></view>
					<view class="tag-image">
						<image :src="item.user.avatar"></image>
						<text>{{item.user.nickname}}</text>
						</view>
				</view>
				<view class="item-middle">
					<text :style="{color:levelColor(item.level)}">{{item.level.text}}</text>
					<image src="/static/personal/right.png"></image>
				</view>
				<view class="item-text">
					<text style="margin-right: 10rpx;">最近需求：</text>
					<view v-if="item.demand" >
						<text>{{item.demand.demand_time}}</text>
						<text class="seperator">|</text>
						<text>{{item.demand.demand_type.text}}</text>
					</view>
					<view v-else class="tip"><text>暂无需求</text></view>
				</view>
				<view class="item-text">
					<text style="margin-right: 10rpx;">最后跟踪：</text>
					<view v-if="item.trace">
						<text>{{item.trace.create_time_text}}</text>
						<text class="seperator">|</text>
						<text>{{item.trace.type.text}}</text>
					</view>
					<view v-else class="tip"><text>暂无跟踪</text></view>
				</view>
			</view>
		</view>
		<view class="footer">
			<tn-button shape="round" fontSize="32" fontBold backgroundColor="#3B54DA" fontColor="#FFFFFF" width="282rpx" height="72rpx" @click="addClient">
				<!-- <text class="tn-icon-add"></text> -->
				+ 添加客户</tn-button>
		</view>
		<tn-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback" ></tn-action-sheet>
		 <tn-modal v-model="dialogShow" :custom="true" :width="auto">
			 <view class="modal-style">
				 <image :src="qrcodeImg" show-menu-by-longpress mode=""></image>
				 <text class="text-tips-bold">请长按二维码转发给客户</text>
				 <text class="text-tips">注：二维码有效期为5分钟</text>
			 </view>
		 </tn-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialogShow:false,
				qrcodeImg:'',
				actionSheetList:[{
				  text: '手动填写信息',
				  fontSize: 32,
				  color:'#525252'
				},
				{
				  text: '客户扫码注册',
				  fontSize: 32,
				  color:'#525252'
				},
				{
				  text: '从公众库添加',
				  fontSize: 32,
				  color:'#525252'
				}],
				show:false,
				list:[],
				total:0,
				currentPage:1,
				pageSize:20,
				searchData:{
					order:'',
					user_id:'',
					industry_id:'',
					level:'',
					demand__demand_type:'',
					integrity_score:'',
					trace_time:'',
					access_authority:''
				},
			}
		},
		onReachBottom(){
			console.log('onReachBottom')
			if(this.total > this.pageSize * this.currentPage){
				this.currentPage += 1;
				this.getList();
			}
		},
		onShow(){
			console.log('demadononShow')
			this.currentPage = 1;
			this.list = [];
			this.getList();
			if(!this.searchData.name){
				this.$refs.topSearchRef.setValue('');
			}
		},
		methods: {
			routeDetail(item){
				this.$Router.push({name:'allClientDetail',query:{id:item.id}})
			},
			actionSheetCallback(index){
				if(index == 0) {
					this.$tip.toast('该功能暂未开放，敬请期待')
				} else if(index == 1) {
					//扫码注册
					
					this.getQrcode();
				} else if(index == 2){
					this.$tip.toast('该功能暂未开放，敬请期待')
				}
			},
			getQrcode(){
				this.dialogShow = true;
				this.$tip.loading()
				this.$http.get('/api/member/business/client/qrcode').then((res) => {
					this.$tip.loaded()
					if(res.data.status == 200) {
						this.qrcodeImg = res.data.data;
					}
				})
			},
			addClient(){
				this.show = true;
				// const self = this;
				// uni.showActionSheet({
				// 	itemList:['手动填写信息','客户扫码注册','从公众库添加'],
				// 	complete(e) {
				// 		console.log('11111',e)
				// 	},
				// 	success(e) {
				// 		console.log('22222',e)
				// 		if(e.tapIndex == 0) {
				// 			self.$tip.toast('该功能暂未开放，敬请期待')
				// 		} else if(e.tabIndex == 1) {
				// 			//扫码注册
				// 		} else if(e.tapIndex == 2){
				// 			self.$tip.toast('该功能暂未开放，敬请期待')
				// 		}
				// 	}
				// })
			},
			levelColor(level){
				let color = '';
				switch(level.value){
					case 'A':color = 'red';break;
					case 'B':color = 'orange';break;
					default:color = 'green';break;
				}
				return color;
			},
			
			getList(){
				this.$tip.loading();
				const reqData = {
					...this.searchData,
					page:this.currentPage,
					limit:this.pageSize,
				}
				this.$http.get('/api/business/client/list',reqData).then((res) => {
					this.$tip.loaded()
					if(res.data.status == 200) {
						let list= res.data.data.data || [];
						this.list = this.list.concat(list);
						console.log('demad',this.list)
						this.currentPage = res.data.data.current_page||1;
						this.pageSize =  res.data.data.per_page||20;
						this.total = res.data.data.total||0;
					}
				})
			},
			openSearch(){
				this.$Router.push({name:'clientFilter',query:{
					searchData:this.searchData
				}})
			},
			topSearch(value){
				this.searchData.name = value;
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.operate{
			z-index:1;
			height: 100rpx;
			position: fixed;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			padding:10rpx 20rpx 0;
			border-bottom: 2rpx solid #EFEFEF;
			width: 100%;
			align-items: center;
			.left-item{
				color:#6F6F6F;
				font-size: 24rpx;
				
				.number{
					font-size:28rpx;
					font-weight: $Semibold;
				}
				
			}
			image{
				width: 48rpx;
				height: 48rpx;
			}
			
		}
		.content{
			padding:120rpx 20rpx calc(112rpx + env(safe-area-inset-bottom));
			color:#6F6F6F;
			font-size: 24rpx;
			.list-item{
				margin-bottom: 20rpx;
				padding:20rpx 20rpx 32rpx;
				border-bottom: 2rpx solid #EFEFEF;
				.item-top{
					color: #525252;
					font-weight: $Semibold;
					font-size: 32rpx;
					line-height: 32rpx;
					margin-bottom: 20rpx;
					display: flex;
					
					image{
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
						
						// vertical-align: middle;
					}
				}
				.item-tag{
					margin-bottom: 20rpx;
					display: flex;
					.tag-score{
						height: 36rpx;
						border-radius: 32rpx;
						border:2rpx solid #3B54DA;
						color: #3B54DA;
						margin-right: 20rpx;
						padding:6rpx 10rpx;
						line-height: 1;
					}
					.tag-scale{
						height: 36rpx;
						line-height: 1;
						border-radius: 32rpx;
						color:#E49357;
						border: 2rpx solid #E49357;
						margin-right: 20rpx;
						padding:6rpx 10rpx;
					}
					.tag-image{
						color: #6F6F6F;
						display: flex;
						align-items: center;
						image{
							width: 36rpx;
							height: 36rpx;
							margin-right: 10rpx;
							
						}
					}
				}
				.item-middle{
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					image{
						width: 10rpx;
						height: 20rpx;
					}
				}
				.item-text{
					margin-bottom: 20rpx;
					display: flex;
					.seperator{
						margin:0 20rpx;
					}
					.tip{
						color: #ABABAB;
					}
				}
				
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			height: calc(112rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: center;
			background: #FFFFFF;
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			align-items: center;
			.button{
				
			}
			
		}
		/deep/.tn-modal__box{
			padding:0!important;
		}
		.modal-style{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding:100rpx 100rpx 60rpx;
			image{
				width: 490rpx;
				height: 490rpx;
			}
			.text-tips-bold{
				font-size: 28rpx;
				color: #525252;
				font-weight: $Semibold;
				margin:60rpx 0 20rpx 0;
			}
			.text-tips{
				color:#FF2323
			}
		}
	}

</style>
